<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				overflow: hidden;
			}
			.box{
				width: 198px;
				height: 203px;
				position: absolute;
				background: url(img/001.jpg)-300px -56px no-repeat;
				animation: fly 1s steps(1) infinite ;
				-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.6) 100%);
				background: -webkit-linear-gradient(); 
			}
			@keyframes fly{
				0%{
					background-position: -300px -56px;
				}
				25%{
					background-position: -558px -56px;
				}
				50%{
					background-position: -795px -56px;
				}
				75%{
					background-position: -558px -56px;
				}
				100%{
					background-position: -300px -56px;
				}
			}	
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				function butterfly(x,y){
					
					var	sx=Math.random()*$(document).left;
					var sy=Math.random()*$(document).top;
					
					this.create=function(){
						$("<div class='box'></div>").appendTo("body")
						$(".box").css({"left":x,"top":y});
					}
					
					this.fly=function(){
						$(".box").animate({"left":sx,"top":sy});	
					}
				}
				$(document).click(function(e){
					var bb= new butterfly(e.clientX,e.clientY);
					bb.create();
					bb.fly();
				})
			})
		</script>
	</head>
	<body>
		<!--<div class="box"></div>-->
	</body>
</html>
